<div class="content-margin edit-pull-replication-hub-task edit-ongoing-task">
    <form class="flex-form" autocomplete="off">
        <div class="align-items-center justify-content-between d-flex gap-2 margin-bottom-md padding-top-xs">
            <div class="flex-horizontal gap-2">
                <i class="icon-pull-replication-hub"></i>
                <h2 data-bind="text: $root.isNewTask() ? `New Replication Hub` : `Edit Replication Hub`" class="mb-0"></h2>
                <span class="badge license-restricted-badge enterprise" data-bind="if: !hasPullReplicationAsHub">Enterprise</span>
            </div>
            <div class="flex-end margin-right-xs" data-bind="react: $root.infoHubView"></div>
        </div>
        <div class="row flex-row" data-bind="with: editedHubTask">
            <div class="col-xs-12 col-lg-6">
                <div class="flex-horizontal margin-bottom" data-bind="css: { 'disabled-area': $root.editedReplicationAccessItem }">
                    <div>
                        <button class="btn btn-default" data-bind="click: $root.cancelHubTaskOperation"
                                title="Return to Ongoing Tasks View">
                            <i class="icon-cancel"></i><span>Cancel</span>
                        </button>
                    </div>
                    <div data-bind="visible: !$root.canDefineCertificates">
                        <button class="btn btn-default" data-bind="click: $root.exportHubConfiguration, css: { 'pe-none item-disabled': !$root.hasPullReplicationAsHub }" title="Export this Hub Configuration to be used by a Sink task">
                            <i class="icon-export"></i><span>Export configuration</span>
                        </button>
                    </div>
                    <div>
                        <span data-placement="right" data-toggle="tooltip" data-html="true" data-animation="true"
                        data-bind="tooltipText: $root.hasPullReplicationAsHub ? null : `<div class='padding'>Your current license does not support this feature.<br /><a href='https://ravendb.net/l/FLDLO4' target='_blank'>Upgrade your plan</a> to access.</div>`">
                            <button class="btn btn-primary"
                            data-bind="click: $root.saveReplicationHubTask, css: { 'btn-spinner': $root.spinners.saveHubTask },
                            disable: $root.spinners.saveHubTask() || !$root.dirtyFlag().isDirty()"
                            title="Save Hub Replication task settings">
                            <i class="icon-save"></i><span>Save</span>
                        </button>
                    </span>
                    </div>
                </div>
                <div class="panel" data-bind="css: { 'pe-none item-disabled': !$root.hasPullReplicationAsHub }">
                    <div class="panel-body">
                        <div class="bg-info text-info padding padding-xs pull-right">
                            <small><i class="icon-info"></i><span>Connection to the Hub is always initiated by the Replication Sink</span></small>
                        </div>
                        <div data-bind="css: { 'disabled-area': $root.editedReplicationAccessItem }">
                            <div class="form-group margin-top" data-bind="validationElement: taskName">
                                <label for="taskName" class="control-label">Task Name</label>
                                <div class="flex-grow">
                                    <input type="text" class="form-control" data-bind="textInput: taskName" id="taskName" placeholder="Enter a descriptive name for the Replication Hub task" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label">Task State</label>
                                <div class="flex-grow">
                                    <button type="button" class="btn btn-block dropdown-toggle text-left" data-toggle="dropdown" aria-expanded="false">
                                        <span data-bind="text: stateText()"></span>
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#" data-bind="click: _.partial($root.setState, 'Enabled')"><span>Enabled</span></a></li>
                                        <li><a href="#" data-bind="click: _.partial($root.setState, 'Disabled')"><span>Disabled</span></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="form-group margin-bottom margin-bottom-xs">
                                <label class="control-label">&nbsp;</label>
                                <div class="toggle" data-placement="right" data-toggle="tooltip" title="Set a delay time for the task" data-animation="true">
                                    <input id="setDelayTime" type="checkbox" data-bind="checked: showDelayReplication" />
                                    <label for="setDelayTime">Set Replication Delay Time</label>
                                </div>
                            </div>
                            <div data-bind="validationElement: delayReplicationTime, collapse: showDelayReplication">
                                <div class="form-group">
                                    <div>
                                        <label class="control-label">Delay Time</label>
                                    </div>
                                    <div class="flex-grow" data-bind="validationElement: delayReplicationTime">
                                        <input type="text" class="form-control" data-bind="durationPicker: delayReplicationTime, durationPickerOptions: { showDays: true, showSeconds: true }" />
                                        <div class="help-block" data-bind="validationMessage: delayReplicationTime"></div>
                                    </div>
                                </div>
                            </div>
                            <div data-bind="collapse: humaneDelayDescription">
                                <div class="form-group margin-bottom">
                                    <label class="control-label">&nbsp;</label>
                                    <div class="bg-info padding padding-sm small flex-horizontal">
                                        <div><i class="icon-info"></i></div>
                                        <div data-bind="html: humaneDelayDescription"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group margin-bottom margin-bottom-xs">
                                <label class="control-label">&nbsp;</label>
                                <div class="toggle" data-placement="right" data-toggle="tooltip" data-bind="attr: { title: $root.db.isSharded() ? 'Not supported in sharded databases' : 'Toggle on to set a responsible node for the task'  }"
                                     data-animation="true">
                                    <input id="responsibleNode" type="checkbox" data-bind="checked: manualChooseMentor, disable: $root.possibleMentors().length === 0 || $root.db.isSharded()">
                                    <label for="responsibleNode">Set responsible node</label>
                                </div>
                            </div>
                            <div data-bind="compose: $root.taskResponsibleNodeSectionView"></div>
                            <div class="form-group margin-bottom margin-bottom-xs" data-bind="validationElement: replicationMode">
                                <label class="control-label">&nbsp;</label>
                                <div class="flex-vertical">
                                    <div class="toggle">
                                        <input id="allowHubToSink" type="checkbox" data-bind="checked: allowReplicationFromHubToSink" />
                                        <label for="allowHubToSink">Allow replication from Hub to Sink</label>
                                    </div>
                                    <div class="toggle">
                                        <div data-bind="visible: !$root.canDefineCertificates" data-placement="right" data-toggle="tooltip" title="Server must be secured in order to use Sink to Hub mode" data-animation="true">
                                            <input type="checkbox" data-bind="checked: false, disable: true" />
                                            <label>Allow replication from Sink to Hub</label>
                                        </div>
                                        <div data-bind="visible: $root.canDefineCertificates">
                                            <input id="allowSinkToHub" type="checkbox" data-bind="checked: allowReplicationFromSinkToHub" />
                                            <label for="allowSinkToHub">Allow replication from Sink to Hub</label>
                                        </div>
                                    </div>
                                    <div class="help-block" data-bind="validationMessage: replicationMode"></div>
                                </div>
                            </div>
                            <div class="form-group margin-bottom margin-bottom-xs">
                                <label class="control-label">&nbsp;</label>
                                <div class="flex-vertical">
                                    <div class="toggle">
                                        <div data-placement="right" data-toggle="tooltip" title="Control whether delete operations are replicated to the Hub from the Sink" data-animation="true">
                                            <input id="preventDeletion" type="checkbox" data-bind="checked: preventDeletions" />
                                            <label for="preventDeletion">Prevent deletions on Hub</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group margin-bottom margin-bottom-xs" data-bind="visible: $root.canDefineCertificates">
                                <label class="control-label">&nbsp;</label>
                                <div class="toggle">
                                    <input id="toggleFiltering" type="checkbox" data-bind="checked: withFiltering, enable: $root.isNewTask" />
                                    <label for="toggleFiltering">Allow Replication Filtering
                                        <small class="margin-left margin-left-sm" data-bind="visible: $root.isNewTask">
                                            <i id="replication-filtering-info" class="icon-info text-info"></i>
                                        </small>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div data-bind="if: $root.canDefineCertificates, css: { 'pe-none item-disabled': !$root.hasPullReplicationAsHub }">
                    <div class="flex-horizontal">
                        <h3 class="margin-top"
                            data-bind="text: withFiltering() ? 'Filtered Replication Access' : 'Replication Access'">
                        </h3>
                        <div class="margin-top margin-left margin-right margin-right-sm flex-grow" title="Filter the replication access items by Name or Thumbprint" data-bind="visible: $root.allReplicationAccessItems().length">
                            <input class="form-control" data-bind="textInput: $root.filterText, attr: { placeholder: 'Filter items (total: ' + $root.allReplicationAccessItems().length + ')'}" />
                        </div>
                        <div class="flex-separator" data-bind="visible: !$root.allReplicationAccessItems().length"></div>
                        <div class="toggle margin-top" data-bind="visible: $root.visibleReplicationAccessItems().length">
                            <input id="details" type="checkbox" data-bind="checked: $root.showAccessDetails" />
                            <label for="details">View Details</label>
                        </div>
                        <div class="margin-top">
                            <button class="btn btn-info" data-bind="click: $root.addNewReplicationAccess, disable: $root.isNewTask">
                                <i class="icon-plus"></i><span>Add Access</span>
                            </button>
                        </div>
                    </div>
                    <div data-bind="if: !$root.allReplicationAccessItems().length && !$root.editedReplicationAccessItem()">
                        <h3 class="text-center text-muted margin-top margin-top-md" data-bind="visible: !$root.isNewTask()">
                            No Replication Access has been yet defined.
                        </h3>
                        <h3 class="text-center text-muted margin-top margin-top-md" data-bind="visible: $root.isNewTask">
                            Please save above Hub definition before adding Replication Access.
                        </h3>
                    </div>
                </div>
                <div class="scroll replication-access-list flex-vertical" data-bind="css: { 'pe-none item-disabled': !$root.hasPullReplicationAsHub }">
                    <div data-bind="foreach: $root.visibleReplicationAccessItems">
                        <div class="panel panel-hover"
                             data-bind="css: { active: $root.editedReplicationAccessItem() && $data.certificate() === $root.editedReplicationAccessItem().certificate() }">
                            <div data-bind="if: !$root.showAccessDetails()">
                                <div class="flex-horizontal padding">
                                    <div class="flex-grow margin-right" data-bind="attr: { title: replicationAccessName }">
                                        <label class="control-label">Name:</label>
                                        <span class="form-control-static margin-left margin-left-sm word-break" data-bind="text: replicationAccessName"></span>
                                    </div>
                                    <div class="flex-horizontal flex-wrap">                                        
                                        <div>
                                            <label class="control-label margin-left-sm"><i data-bind="attr: { class: certificate().expirationIcon }"></i> Expiration:</label>                                            
                                        </div>
                                        <div class="margin-right">
                                            <small class="form-control-static margin-left margin-left-sm" data-bind="text: certificate().expirationText()"></small>
                                        </div>
                                    </div>
                                    
                                    <div class="nobr" data-bind="template: { name: 'access-item-buttons' }"></div>
                                    
                                </div>
                            </div>
                            <div data-bind="if: $root.showAccessDetails">
                                <div class="padding">
                                    <div class="form-group margin-bottom margin-bottom-xs">
                                        <label class="control-label">Access Name</label>
                                        <div class="form-control-static" data-bind="text: replicationAccessName"></div>
                                    </div>
                                    <div class="form-group margin-bottom margin-bottom-xs">
                                        <label class="control-label">Certificate</label>
                                        <div class="panel certificate-item">
                                            <div class="padding padding-sm flex-horizontal" data-bind="visible: $root.showAccessDetails">
                                                <div title="Certificate thumbprint">
                                                    <i class="icon-certificate"></i><span data-bind="text: certificate().thumbprint()"></span>
                                                </div>
                                            </div>
                                            <div class="panel-addon padding padding-sm">
                                                <div class="flex-horizontal">
                                                    <span class="notBefore" data-bind="visible: $root.showAccessDetails">
                                                        <span class="margin-right margin-right-sm"><i class="icon-generation"></i><span>Valid From</span></span>
                                                        <strong data-bind="text: certificate().validFromText()"></strong>
                                                    </span>
                                                    <span class="expiration" data-bind="css: { 'margin-left': $root.showAccessDetails }">
                                                        <span class="margin-right margin-right-sm"><i data-bind="attr: { class: certificate().expirationIcon }"></i><span>Expiration</span></span>
                                                        <strong data-bind="attr: { class: certificate().expirationClass }, text: certificate().expirationText()"></strong>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div data-bind="if: $parent.withFiltering" class="margin-bottom">
                                        <div class="form-group margin-bottom margin-bottom-xs" data-bind="visible: !$root.showAccessDetails()">
                                            <label class="control-label">Filtering Replication</label>
                                            <div class="margin-top margin-top-xs">
                                                <div><small data-bind="text: filteringReplicationText"></small></div>
                                            </div>
                                        </div>
                                        <div class="form-group margin-bottom margin-bottom-xs" data-bind="visible: $root.showAccessDetails">
                                            <label class="control-label">Hub to Sink Filtering</label>
                                            <div data-bind="foreach: hubToSinkPrefixes" class="margin-top margin-top-xs">
                                                <div><small data-bind="text: $data.path"></small></div>
                                            </div>
                                        </div>
                                        <div class="form-group" data-bind="visible: $root.showAccessDetails">
                                            <label class="control-label">Sink to Hub Filtering</label>
                                            <div data-bind="visible: samePrefixesForBothDirections" class="margin-top margin-top-xs">
                                                <small>Same as <i>Hub to Sink</i></small>
                                            </div>
                                            <div data-bind="visible: !samePrefixesForBothDirections(), foreach: sinkToHubPrefixes" class="margin-top margin-top-xs">
                                                <div><small data-bind="text: $data.path"></small></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="pull-right btn-group btn-group-sm replication-access-buttons">
                                        <div data-bind="template: { name: 'access-item-buttons' }"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-primary" data-bind="click: $root.loadMoreAccessItems(), visible: $root.showLoadMore">
                        <i class="icon-plus"></i><span>Load more items</span>
                    </button>
                </div>
            </div>
            <div class="col-xs-12 col-lg-6" data-bind="with: $root.editedReplicationAccessItem, css: { 'pe-none item-disabled': !$root.hasPullReplicationAsHub }">
                <div class="panel margin-top">
                    <div class="panel-body">
                        <button class="close" data-bind="click: $root.cancelReplicationAccessOperation" aria-hidden="true">
                            <i class="icon-cancel"></i>
                        </button>
                        <h3 data-bind="if: isNewAccessItem">New Replication Access</h3>
                        <h3 data-bind="if: !isNewAccessItem()">Edit Replication Access</h3>
                        <div class="form-group margin-top" data-bind="validationElement: replicationAccessName">
                            <label for="replicationAccessName" class="control-label">Access Name</label>
                            <div class="flex-grow">
                                <input type="text" class="form-control" data-bind="textInput: replicationAccessName" id="replicationAccessName" placeholder="Enter a name for the Replication Access" />
                            </div>
                        </div>
                        <div class="form-group" data-bind="validationElement: certificate">
                            <label class="control-label">Certificate</label>
                            <div class="flex-grow">
                                <div data-bind="if: certificate">
                                    <div class="panel certificate-item margin-top margin-top-xs">
                                        <div class="padding padding-sm flex-horizontal">
                                            <div title="Certificate thumbprint">
                                                <i class="icon-certificate"></i>
                                                <span data-bind="text: certificate().thumbprint()"></span>
                                            </div>
                                            <div class="flex-separator"></div>
                                            <button class="btn btn-sm btn-primary pull-right" title="Remove this certificate"
                                                    data-bind="click: _.partial($root.removeCertificate, $data), visible: isNewAccessItem">
                                                <i class="icon-trash"></i>
                                            </button>
                                        </div>
                                        <div class="panel-addon padding padding-sm">
                                            <div class="flex-horizontal">
                                                <span class="notBefore">
                                                    <span class="margin-right margin-right-sm"><i class="icon-generation"></i><span>Valid From</span></span>
                                                    <strong data-bind="text: certificate().validFromText()"></strong>
                                                </span>
                                                <span class="expiration margin-left">
                                                    <span class="margin-right margin-right-sm"><i data-bind="attr: { class: certificate().expirationIcon }"></i><span>Expiration</span></span>
                                                    <strong data-bind="attr: { class: certificate().expirationClass }, text: certificate().expirationText"></strong>
                                                 </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="input-group file-input">
                                    <input type="file" id="certificateFilePicker" data-bind="event: { change: _.partial($root.uploadCertificate, $element) }" tabindex="-1" />
                                </div>
                                <div class="flex-horizontal certificates-actions margin-bottom" data-bind="if: isNewAccessItem() && !certificate()">
                                    <label for="certificateFilePicker" class="btn btn-default" id="upload-certificate" data-toggle="tooltip" data-placement="bottom">
                                        <i class="icon-import"></i><span>Upload existing certificate</span>
                                    </label>
                                    <button type="button" class="btn btn-default" id="generate-certificate" data-toggle="tooltip" data-placement="bottom"
                                            data-bind="click: $root.generateCertificate, disable: $root.spinners.generateCertificate,
                                                       css: { 'btn-spinner' : $root.spinners.generateCertificate }">
                                        <i class="icon-magic-wand"></i><span>Generate new certificate</span>
                                    </button>
                                </div>
                                <span class="help-block" data-bind="validationMessage: certificate"></span>
                            </div>
                        </div>
                        <div data-bind="visible: $parent.withFiltering" class="margin-bottom">
                            <hr>
                            <div class="margin-bottom">
                                <h3>Filter Replicated Documents by ID Paths</h3>
                            </div>
                            <div class="form-group" data-bind="validationElement: inputPrefixHubToSink().path">
                                <label for="hubToSink" class="control-label">From Hub to Sink
                                    <small id="hub-to-sink-info" class="margin-left margin-left-sm" data-toggle="tooltip" data-placement="bottom"><i class="icon-info text-info"></i></small>
                                </label>
                                <div class="flex-grow" id="hubToSink" data-bind="validationElement: hubToSinkPrefixes">
                                    <div class="flex-horizontal">
                                        <div class="flex-grow">
                                            <input type="text" class="form-control" placeholder="Enter documents ID path. Use <path>/* for all child paths." data-bind="textInput: inputPrefixHubToSink().path" />
                                        </div>
                                        <button class="btn btn-info"
                                                data-bind="click: addHubToSinkInputPrefixWithBlink, enable: inputPrefixHubToSink && inputPrefixHubToSink().path() && inputPrefixHubToSink().path.isValid()">
                                            <i class="icon-plus"></i><span>Add Path</span>
                                        </button>
                                    </div>
                                    <div data-bind="visible: hubToSinkPrefixes().length" class="margin-top">
                                        <ul class="well collection-list" data-bind="foreach: hubToSinkPrefixes">
                                            <li>
                                                <div class="name" data-bind="text: $data.path()"></div>
                                                <a title="Remove prefix path" href="#" data-bind="click: $parent.removePrefixPathHubToSink.bind($parent, $data.path())"><i class="icon-trash"></i></a>
                                            </li>
                                        </ul>
                                    </div>
                                    <span class="help-block" data-bind="validationMessage: hubToSinkPrefixes"></span>
                                    <div class="padding padding-xs text-warning bg-warning" data-bind="visible: hasSingleDocumentPattern(hubToSinkPrefixes())">
                                        <small><i class="icon-warning"></i><span data-bind="text: getSingleDocumentPatternWarning()"></span></small>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group margin-top">
                                <label class="control-label">&nbsp;</label>
                                <div class="toggle">
                                    <input id="useStuff" type="checkbox" data-bind="checked: samePrefixesForBothDirections" />
                                    <label for="useStuff">Use above paths (<i>Hub to Sink</i>) for both directions</label>
                                </div>
                            </div>
                            <div class="form-group" data-bind="validationElement: inputPrefixSinkToHub().path">
                                <label for="sinkToHub" class="control-label">From Sink to Hub
                                    <small id="sink-to-hub-info" class="margin-left margin-left-sm" data-toggle="tooltip" data-placement="bottom"><i class="icon-info text-info"></i></small>
                                </label>
                                <div class="flex-grow" id="sinkToHub" data-bind="collapse: !samePrefixesForBothDirections(), validationElement: sinkToHubPrefixes">
                                    <div class="flex-horizontal">
                                        <div class="flex-grow">
                                            <input type="text" class="form-control" placeholder="Enter documents ID path. Use <path>/* for all child paths." data-bind="textInput: inputPrefixSinkToHub().path" />
                                        </div>
                                        <button class="btn btn-info"
                                                data-bind="click: addSinkToHubInputPrefixWithBlink, enable: inputPrefixSinkToHub && inputPrefixSinkToHub().path() && inputPrefixSinkToHub().path.isValid()">
                                                <i class="icon-plus"></i><span>Add Path</span>
                                        </button>
                                    </div>
                                    <div data-bind="visible: sinkToHubPrefixes().length" class="margin-top">
                                        <ul class="well collection-list" data-bind="foreach: sinkToHubPrefixes">
                                            <li>
                                                <div class="name" data-bind="text: $data.path()"></div>
                                                <a title="Remove prefix path" href="#" data-bind="click: $parent.removePrefixPathSinkToHub.bind($parent, $data.path())"><i class="icon-trash"></i></a>
                                            </li>
                                        </ul>
                                    </div>
                                    <span class="help-block" data-bind="validationMessage: sinkToHubPrefixes"></span>
                                    <div class="padding padding-xs text-warning bg-warning" data-bind="visible: hasSingleDocumentPattern(sinkToHubPrefixes())">
                                        <small><i class="icon-warning"></i><span data-bind="text: getSingleDocumentPatternWarning()"></span></small>
                                    </div>
                                </div>
                                <div data-bind="visible: samePrefixesForBothDirections">
                                    <div class="form-control-static">Same as <i>Hub to Sink</i></div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="margin-bottom">
                            <div class="margin-bottom margin-bottom-xs">
                                <h3>Information for Sink</h3>
                            </div>
                            <div class="form-group" data-bind="validationElement: certificateInfoWasSavedForSinkTask">
                                <label class="control-label">&nbsp;</label>
                                <div>
                                    <div class="flex-horizontal">
                                        <div class="has-disable-reason" data-placement="bottom"
                                             data-bind="attr: { 'data-original-title': $root.spinners.generateCertificate() || disableExport() ?
                                                                'Please provide required configuration data before exporting.' : '',
                                                                'title': !$root.spinners.generateCertificate() && !disableExport() ?
                                                                'Export this access configuration to a .json file' : '' }">
                                            <button class="btn btn-default"
                                                    data-bind="click: $root.exportAccessConfiguration,
                                                               disable: $root.spinners.generateCertificate() || disableExport()">
                                                <i class="icon-export"></i><span>Export access configuration</span>
                                            </button>
                                        </div>
                                        <div class="has-disable-reason" data-placement="bottom"
                                             data-bind="if: isNewAccessItem,
                                                        attr: { 'data-original-title': $root.spinners.generateCertificate() || disableDownload() ?
                                                                 usingExistingCertificate() ? 'Download is available only for a RavenDb generated certificate.' :
                                                                'Please add a certificate before downloading.' : '',
                                                                'title': !$root.spinners.generateCertificate() && !disableDownload() ?
                                                                'Download the generated certificate to a .pfx file (public & private keys)' : '' }">
                                            <button class="btn btn-default"
                                                    data-bind="click: $root.downloadCertificate,
                                                               disable: $root.spinners.generateCertificate() || disableDownload()">
                                                <i class="icon-export"></i><span>Download generated certificate</span>
                                            </button>
                                        </div>
                                    </div>
                                    <span class="help-block" data-bind="validationMessage: certificateInfoWasSavedForSinkTask"></span>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="flex-horizontal pull-right margin-top">
                            <div>
                                <button class="btn btn-default" title="Cancel editing this Replication Access"
                                        data-bind="click: $root.cancelReplicationAccessOperation">
                                    <i class="icon-cancel"></i><span>Cancel</span>
                                </button>
                            </div>
                            <div data-bind="visible: $parent.withFiltering">
                                <button class="btn btn-default" title="Clone this Replication Access"
                                        data-bind="click: $root.cloneReplicationAccessItem, disable: $root.spinners.generateCertificate">
                                    <i class="icon-clone"></i><span>Clone</span>
                                </button>
                            </div>
                            <div>
                                <button class="btn btn-primary" title="Save this Replication Access"
                                        data-bind="disable: $root.spinners.saveReplicationAccess() || $root.spinners.generateCertificate() || !dirtyFlag().isDirty(), 
                                                   css: { 'btn-spinner': $root.spinners.saveReplicationAccess }, click: $root.saveReplicationAccessItem">
                                    <i class="icon-save"></i><span>Save</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script type="text/html" id="access-item-buttons">
    <button class="btn btn-sm btn-default" title="Edit this replication access"
            data-bind="click: _.partial($root.editReplicationAccessItem, $data)">
        <i class="icon-edit"></i><span>Edit</span>
    </button>
    <button class="btn btn-sm btn-primary" title="Delete this replication access"
            data-bind="click: _.partial($root.deleteReplicationAccessItem, $data), disable: $root.editedReplicationAccessItem()">
        <i class="icon-trash"></i>
    </button>
</script>
